<template>
    <div class="dome">
        <div class="footNav">
            <router-link v-for="(item,index) in navList" :key="index" :to="item.url" exact active-class="active">
                <img :src="route_path == item.url ? item.active_imgurl : item.imgurl" :alt="item.title">
                {{item.title}}
            </router-link>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
import store from '../../store'
export default {
    name: "dome",
    data(){
        return {
            navList:[
                {
                    url: "/Home",
                    imgurl: require("../../assets/Home-icon.png"),
                    active_imgurl: require("../../assets/Home-active-icon.png"),
                    title: "首页"
                },
                {
                    url: "/Classify",
                    imgurl: require("../../assets/classify-icon.png"),
                    active_imgurl: require("../../assets/classify-active-icon.png"),
                    title: "分类"
                },
                {
                    url: "/ShoppingCart",
                    imgurl: require("../../assets/shopping-cart-icon.png"),
                    active_imgurl: require("../../assets/shopping-cart-active-icon.png"),
                    title: "购物车"
                },
                {
                    url: "/My",
                    imgurl: require("../../assets/my-icon.png"),
                    active_imgurl: require("../../assets/my-active-icon.png"),
                    title: "我的"
                }
            ],
            route_path:"",
        }
    },
    mounted(){
        this.route_path = this.$route.path;
    },
    watch: {
        '$route' (to, from) { //监听路由是否变化
            if(this.$route){// 判断条件1  判断传递值的变化
                this.route_path = this.$route.path
                // console.log(this.$route.path)
            }
        } 
    }
}
</script>

<style lang="scss" scoped>
.dome{
    margin: 0 auto;
    .footNav{
        width: 100%;
        height: .5rem;
        background-color: rgba(255,255,255,.9);
        box-shadow: inset 0 0 0 0 #E1E1E1;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 10;
        display: flex;
        justify-content: space-around;
        >a{
            display: block;
            width: .48rem;
            line-height: .16rem;
            text-align: center;
            text-decoration: none;
            color: #666;
            font-size: .11rem;
            display: flex;
            flex-flow: column;
            justify-content: center;
            >img{
                width: .2rem;
                height: .2rem;
                margin: 0 auto;
            }
        }
        .active{
            color: #DD3333;
        }
    }
    .footNav:before{
        content: "";
        width: 100%;
        height: .01rem;
        position: absolute;
        background-color: #ccc;
        transform: scaleY(.5);
    }
}
</style>
